<template>
  <div id="dswd-aboutus-three" ref="dswd-aboutus-three">
    <div v-if="device === 'desktop'" class="dswd-aboutus-three">
      <div class="three-wrap">
        <div class="aboutus-three-title">
          <div class="aboutus-title">新闻动态</div>
          <div class="aboutus-en-title">Our News</div>
        </div>
        <div class="three-content">
          <div ref="news-carousel" class="news-carousel">
            <carousel
              v-if="showNewsCarousel"
              :height.sync="carouselHeight"
              :latest-news.sync="latestNews"
              @learnMore="learnMore"
            />
          </div>
        </div>
      </div>
      <div class="news-list">
        <template v-for="item of latestNews">
          <div :key="'news' + item.id" class="news-wrap">
            <div class="news-img">
              <draw-img class="img-wrap" :relative-id="item.newid" />
              <!-- <div class="img-wrap">
                <img :src="item.linkUrl" alt="item.title">
              </div> -->
            </div>
            <div class="item-content">
              <div class="new-data">
                {{ item.updateTime | timeFilters }}
              </div>
              <div class="news-content">
                <div class="news-title" @click="learnMore(item)">
                  {{ item.title }}
                </div>
                <div class="news-text">{{ item.abstracts }}</div>
                <div class="news-type">
                  <span class="news-tag">{{ item.type | typeFilters }}</span>
                </div>
                <div class="news-auth-time">
                  {{ item.author }} | {{ item.updateTime | timeDiff }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="news-pagination">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :current-page="page.pageNum"
          :page-size="page.pageSize"
          :total="page.total"
          @current-change="currentChange"
        />
      </div>
    </div>
    <div v-if="device === 'ipad'" class="dswd-p-aboutus-three">
      <div class="three-wrap">
        <div class="aboutus-three-title">
          <div class="aboutus-title">新闻动态</div>
          <div class="aboutus-en-title">Our News</div>
        </div>
        <div class="three-content">
          <div ref="news-carousel" class="news-carousel">
            <carousel
              v-if="showNewsCarousel"
              :height.sync="carouselHeight"
              :latest-news.sync="latestNews"
              @learnMore="learnMore"
            />
          </div>
        </div>
      </div>
      <div class="news-list">
        <template v-for="item of latestNews">
          <div :key="'news' + item.id" class="news-wrap">
            <div class="news-img">
              <draw-img class="img-wrap" :relative-id="item.newid" />
              <!-- <div class="img-wrap">
                <img :src="item.linkUrl" alt="item.title">
              </div> -->
            </div>
            <div class="item-content">
              <div class="news-content">
                <div class="news-title" @click="learnMore(item)">
                  {{ item.title }}
                </div>
                <div class="news-text">{{ item.abstracts }}</div>
                <div class="news-type">
                  <span class="news-tag">{{ item.type | typeFilters }}</span>
                </div>
                <div class="news-auth-time">
                  {{ item.author }} | {{ item.updateTime | timeDiff }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="news-pagination">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :current-page="page.pageNum"
          :page-size="page.pageSize"
          :total="page.total"
          @current-change="currentChange"
        />
      </div>
    </div>
    <div v-if="device === 'mobile'" class="dswd-m-aboutus-three">
      <div class="three-wrap">
        <div class="aboutus-three-title">
          <div class="aboutus-title">新闻动态</div>
          <div class="aboutus-en-title">Our News</div>
        </div>
        <div class="three-content">
          <div ref="news-carousel" class="news-carousel">
            <carousel
              v-if="showNewsCarousel"
              :height.sync="carouselHeight"
              :latest-news.sync="latestNews"
              @learnMore="learnMore"
            />
          </div>
        </div>
      </div>
      <div class="news-list">
        <template v-for="item of latestNews">
          <div :key="'news' + item.id" class="news-wrap">
            <div class="news-img">
              <draw-img class="img-wrap" :relative-id="item.newid" />
              <!-- <div class="img-wrap">
                <img :src="item.linkUrl" alt="item.title">
              </div> -->
            </div>
            <div class="item-content">
              <div class="news-content">
                <div class="news-title" @click="learnMore(item)">
                  {{ item.title }}
                </div>
                <div class="news-text">{{ item.abstracts }}</div>
              </div>
              <div class="news-bottom">
                <div class="news-type">
                  <span class="news-tag">{{ item.type | typeFilters }}</span>
                </div>
                <div class="news-auth-time">
                  {{ item.author }} | {{ item.updateTime | timeDiff }}
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <div class="news-pagination">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :current-page="page.pageNum"
          :page-size="page.pageSize"
          :total="page.total"
          @current-change="currentChange"
        />
      </div>
    </div>
    <detaildialog :dialog-visible="dialogVisible" @dialogClose="dialogClose">
      <detail v-if="dialogVisible" :root-news.sync="rootNews" />
    </detaildialog>
  </div>
</template>

<script>
import moment from 'moment'
import drawImg from '@/components/Drawimg'
import carousel from './carousel'
import detail from './detail'
import detaildialog from '@/components/Dialog/detaildialog'
import { mapState } from 'vuex'
export default {
  components: { carousel, drawImg, detail, detaildialog },
  data() {
    return {
      latestNews: [],
      page: {
        pageSize: 5,
        pageNum: 1,
        total: 0
      },
      carouselHeight: '500px',
      showNewsCarousel: false,
      rootNews: {},
      dialogVisible: false
    }
  },
  filters: {
    timeFilters(time) {
      return time !== null ? moment(time).format('MM/DD') : ''
    },
    timeDiff(time) {
      let resultValue = ''
      if (time !== null && time !== '') {
        const hours = moment
          .duration(moment() - moment(time), 'ms')
          .get('hours')
        resultValue = hours + '小时之前'
      }
      return resultValue
    },
    typeFilters(type) {
      let resultValue = ''
      if (type === '1') {
        resultValue = '社会新闻'
      } else if (type === '2') {
        resultValue = '公司新闻'
      }
      return resultValue
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device,
      clientWidth: (state) => state.app.clientWidth
    })
  },
  watch: {
    clientWidth() {
      this.resizeHandler()
    }
  },
  mounted() {
    this.resizeHandler()
    this.getNewsList()
  },
  methods: {
    resizeHandler() {
      this.$nextTick(() => {
        if (
          this.$refs['news-carousel'] &&
          this.$refs['news-carousel'].clientWidth
        ) {
          const first_width = this.$refs['news-carousel'].clientWidth
          this.carouselHeight = first_width * 0.57 + 'px'
        }
      })
    },
    currentChange(val) {
      this.page.pageNum = val
      this.getNewsList()
    },
    getNewsList() {
      this.$api.news
        .selectNewsList({
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        })
        .then((res) => {
          if (res.code === 200) {
            this.page.total = res.data.total
            this.showNewsCarousel = false
            this.latestNews = res.data.list
            setTimeout(() => {
              this.showNewsCarousel = true
            })
          }
        })
    },
    learnMore(item) {
      this.rootNews = item
      this.dialogVisible = true
    },
    dialogClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/aboutus/three.scss";
</style>
